<template>
  <el-container class="main_container">
    <!--头部布局-->
    <el-header>
      <!--logo、项目名称-->
      <div class="left_box">
        <img src="https://moster0506.oss-cn-shanghai.aliyuncs.com/2020/05/15/1262504573984f37b7ea100ae3d2abc0file.png"
             alt="logo">
        <span>新冠物资管理系统</span>
      </div>
      <!--用户头像-->
      <div class="right_box">
        <el-dropdown>
          <img src="https://moster0506.oss-cn-shanghai.aliyuncs.com/2020/05/15/0848a23c90df4d3d9e2b743527a05714file.png"
               alt="avater">
          <!--下拉菜单-->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-house">系统首页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-ship">交流讨论</el-dropdown-item>
            <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse?'64px':'200px'">
        <!--展开、收起-->
        <div class="toggle_box" @click="toggle_box">|||</div>
        <!--菜单栏-->
        <el-menu
          :default-active="activePath"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
          :router="true"
          :collapse-transition="false">
          <MenuTree :menuList="this.menuList"></MenuTree>
        </el-menu>

      </el-aside>
      <el-main>
        <!--路由视图-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  // 引入其他组件
  import MenuTree from '../components/MenuTree'

  export default {
    name: 'Main',
    // 注册引入的组件
    components: {MenuTree},
    data() {
      return {
        isCollapse: false,
        menuList: [{
          'id': 1,
          'parentId': 0,

          'menuName': '系统管理',
          'url': '',
          'icon': 'el-icon-setting',
          'orderNum': 1,
          'open': 1,
          'disabled': false,
          'perms': null,
          'type': 0,
          'children': [{
            'id': 253,
            'parentId': 1,
            'menuName': '欢迎页面',
            'url': '/welcome',
            'icon': 'el-icon-star-off',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': 'welcome:view',
            'type': 0,
            'children': []
          },
            {
              'id': 226,
              'parentId': 1,
              'menuName': '用户管理',
              'url': '/users',
              'icon': 'el-icon-user',
              'orderNum': 2,
              'open': 0,
              'disabled': false,
              'perms': 'users',
              'type': 0,
              'children': []
            },
            {
              'id': 321,
              'parentId': 1,
              'menuName': '附件管理',
              'url': '/attachments',
              'icon': 'el-icon-picture-outline',
              'orderNum': 2,
              'open': 1,
              'disabled': false,
              'perms': '',
              'type': 0,
              'children': []
            },
            {
              'id': 4,
              'parentId': 1,
              'menuName': '菜单权限',
              'url': '/menus',
              'icon': 'el-icon-help',
              'orderNum': 3,
              'open': 0,
              'disabled': false,
              'perms': null,
              'type': 0,
              'children': []
            },
            {
              'id': 235,
              'parentId': 1,
              'menuName': '角色管理',
              'url': '/roles',
              'icon': 'el-icon-postcard',
              'orderNum': 3,
              'open': 0,
              'disabled': false,
              'perms': '',
              'type': 0,
              'children': []
            },
            {
              'id': 261,
              'parentId': 1,
              'menuName': '部门管理',
              'url': '/departments',
              'icon': 'el-icon-s-home',
              'orderNum': 3,
              'open': 0,
              'disabled': false,
              'perms': '',
              'type': 0,
              'children': []
            },
            {
              'id': 319,
              'parentId': 1,
              'menuName': '公告管理',
              'url': '/notices',
              'icon': 'el-icon-s-flag',
              'orderNum': 4,
              'open': 0,
              'disabled': true,
              'perms': '',
              'type': 0,
              'children': []
            }
          ]
        },
          {
            'id': 312,
            'parentId': 0,
            'menuName': '业务管理',

            'url': null,
            'icon': 'el-icon-s-goods',
            'orderNum': 2,
            'open': 0,
            'disabled': false,
            'perms': null,
            'type': 0,
            'children': [{
              'id': 229,
              'parentId': 312,
              'menuName': '物资管理',
              'url': '',
              'icon': 'el-icon-date',
              'orderNum': 1,
              'open': 1,
              'disabled': false,
              'perms': 'el-icon-date',
              'type': 0,
              'children': [{
                'id': 230,
                'parentId': 229,
                'menuName': '物资入库',
                'url': '/inStocks',
                'icon': 'el-icon-date',
                'orderNum': 1,
                'open': 1,
                'disabled': false,
                'perms': 'el-icon-date',
                'type': 0,
                'children': []
              },
                {
                  'id': 267,
                  'parentId': 229,
                  'menuName': '物资资料',
                  'url': '/products',
                  'icon': 'el-icon-goods',
                  'orderNum': 2,
                  'open': 0,
                  'disabled': false,
                  'perms': '',
                  'type': 0,
                  'children': []
                },
                {
                  'id': 268,
                  'parentId': 229,
                  'menuName': '物资类别',
                  'url': '/productCategorys',
                  'icon': 'el-icon-star-off',
                  'orderNum': 2,
                  'open': 0,
                  'disabled': false,
                  'perms': '',
                  'type': 0,
                  'children': []
                },
                {
                  'id': 270,
                  'parentId': 229,
                  'menuName': '物资发放',
                  'url': '/outStocks',
                  'icon': 'el-icon-goods',
                  'orderNum': 5,
                  'open': 1,
                  'disabled': false,
                  'perms': '',
                  'type': 0,
                  'children': []
                },
                {
                  'id': 316,
                  'parentId': 229,
                  'menuName': '物资库存',
                  'url': '/stocks',
                  'icon': 'el-icon-tickets',
                  'orderNum': 5,
                  'open': 0,
                  'disabled': false,
                  'perms': '',
                  'type': 0,
                  'children': []
                }
              ]
            },
              {
                'id': 311,
                'parentId': 312,
                'menuName': '物资流向',
                'url': null,
                'icon': 'el-icon-edit',
                'orderNum': 3,
                'open': 0,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': [{
                  'id': 310,
                  'parentId': 311,
                  'menuName': '物资去处',
                  'url': '/consumers',
                  'icon': 'el-icon-edit',
                  'orderNum': 1,
                  'open': 0,
                  'disabled': false,
                  'perms': '',
                  'type': 0,
                  'children': []
                },
                  {
                    'id': 269,
                    'parentId': 311,
                    'menuName': '物资来源',
                    'url': '/suppliers',
                    'icon': 'el-icon-coordinate',
                    'orderNum': 5,
                    'open': 0,
                    'disabled': false,
                    'perms': '',
                    'type': 0,
                    'children': []
                  }
                ]
              }
            ]
          },
          {
            'id': 303,
            'parentId': 0,
            'menuName': '健康报备',
            'url': '',
            'icon': 'el-icon-platform-eleme',
            'orderNum': 3,
            'open': 0,
            'disabled': false,
            'perms': '',
            'type': 0,
            'children': [{
              'id': 273,
              'parentId': 303,
              'menuName': '全国疫情',
              'url': '/map',
              'icon': 'el-icon-s-opportunity',
              'orderNum': 1,
              'open': 1,
              'disabled': false,
              'perms': 'map:view',
              'type': 0,
              'children': []
            },
              {
                'id': 304,
                'parentId': 303,
                'menuName': '健康打卡',
                'url': '/health',
                'icon': 'el-icon-s-cooperation',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              },
              {
                'id': 305,
                'parentId': 303,
                'menuName': '查看情况',
                'url': null,
                'icon': 'el-icon-c-scale-to-original',
                'orderNum': 2,
                'open': 1,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': []
              },
              {
                'id': 272,
                'parentId': 303,
                'menuName': '疫情辟谣',
                'url': '/rumors',
                'icon': 'el-icon-help',
                'orderNum': 5,
                'open': 0,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': []
              }
            ]
          },
          {
            'id': 295,
            'parentId': 0,
            'menuName': '其他管理',
            'url': '',
            'icon': 'el-icon-s-marketing',
            'orderNum': 5,
            'open': 0,
            'disabled': false,
            'perms': '',
            'type': 0,
            'children': [{
              'id': 297,
              'parentId': 295,
              'menuName': '监控管理',
              'url': '',

              'icon': 'el-icon-warning',
              'orderNum': 1,
              'open': 0,
              'disabled': false,
              'perms': '',
              'type': 0,
              'children': [{
                'id': 298,
                'parentId': 297,
                'menuName': 'SQL监控',
                'url': '/druid',
                'icon': 'el-icon-view',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': []
              }]
            },
              {
                'id': 341,
                'parentId': 295,
                'menuName': '个人博客',
                'url': '/blog',
                'icon': 'el-icon-view',
                'orderNum': 1,
                'open': 0,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              },
              {
                'id': 296,
                'parentId': 295,
                'menuName': 'swagger文档',
                'url': '/swagger',
                'icon': 'el-icon-document',
                'orderNum': 2,
                'open': 0,
                'disabled': false,
                'perms': null,
                'type': 0,
                'children': []
              },
              {
                'id': 318,
                'parentId': 295,
                'menuName': '图标管理',
                'url': '/icons',
                'icon': 'el-icon-star-off',
                'orderNum': 2,
                'open': 1,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              }
            ]
          },
          {
            'id': 5,
            'parentId': 0,
            'menuName': '日志管理',
            'url': '/logs',
            'icon': 'el-icon-camera',
            'orderNum': 6,
            'open': 0,
            'disabled': false,
            'perms': null,
            'type': 0,
            'children': [{
              'id': 271,
              'parentId': 5,
              'menuName': '登入日志',
              'url': '/loginLog',
              'icon': 'el-icon-date',
              'orderNum': 1,
              'open': 0,
              'disabled': false,
              'perms': 'login:log',
              'type': 0,
              'children': []
            },
              {
                'id': 307,
                'parentId': 5,
                'menuName': '操作日志',
                'url': '/logs',
                'icon': 'el-icon-edit',
                'orderNum': 1,
                'open': 1,
                'disabled': false,
                'perms': '',
                'type': 0,
                'children': []
              }
            ]
          }
        ],
        activePath: ''// 激活路径
      }
    },
    methods: {
      toggle_box(flag) {
        this.isCollapse = !this.isCollapse
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }

</script>

<style lang="less" scoped>
  /*整个容器高度*/
  .main_container {
    height: 100%;
  }

  /*头部布局*/
  .el-header {
    background-color: #001529;
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
    padding-left: 0;
    align-items: center;
    font-size: 20px;
    /*左边区域*/

    .left_box {
      display: flex;
      align-items: center;
      /*logo*/

      img {
        width: 50px;
        height: 50px;
        margin: 10px 0 10px 10px;
        border-radius: 40%;
      }

      /*项目名称*/

      span {
        margin-left: 15px;
      }
    }

    /*右边区域*/

    .right_box {
      /*头像*/

      .el-dropdown > img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #FFFFFF;
        margin: 10px 15px 0 0;
        background-size: contain;
      }
    }
  }

  /*侧边栏*/
  .el-aside {
    background-color: #001529;
    overflow: hidden;

    .el-menu {
      border-right: none;
    }

    /*菜单 展开、收起*/

    .toggle_box {
      color: #FFFFFF;
      background-color: burlywood;
      font-size: 20px;
      font-weight: bold;
      line-height: 25px;
      letter-spacing: 0.2em;
      text-align: center;
      cursor: pointer;
      padding: 0 0 5px 0;
    }
  }

  /*内容主体*/
  .el-main {
    background-color: #E9EEF3;
  }

  /*下拉菜单*/
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
</style>
